<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态列表</title>
</head>
<link rel="stylesheet" href="../../CSS样式库/一级侧边导航栏.css">
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: grey;
        font-family: '华文行楷';
    }

    h1 {
        margin-bottom: 5px;
    }
</style>
<body>
<div id="container"></div>

<!--引入react核心库-->
<script src="../../js-依赖包/react.development.js"></script>
<!--引入react.dom 用于支出react操作DOM-->
<script src="../../js-依赖包/react-dom.development.js"></script>
<!--引入babel  用于将jsx转换为js-->
<script src="../../js-依赖包/babel.min.js"></script>

<script type="text/babel"> //这里一定要将类型写为babel
//模拟一些数据
let data = [{name:'华为',price:2999}, {name:'苹果',price:3999}, {name:'小米',price:4999}]
// 1. 创建虚拟DOM
const vDom = (
    <div className="aside">
        <h1>Phone:</h1>
        <hr/>
        <ul>
            {data.map((item, index) => {
                return <li key={index}><a href="#">{item.name}的价格:{item.price}</a></li>
            })}
        </ul>
    </div>
)
// 2. 渲染虚拟DOM到html页面
ReactDOM.render(vDom, document.getElementById('container'))
</script>
</body>
</html>